<template>
	<div class="x-handle" @mousedown="mouseDown"></div>
</template>

<script setup>

const lastX = ref();

const { proxy } = getCurrentInstance();

onMounted(() => {
	document.addEventListener("mouseup", mouseUp);
})

onUnmounted(() => {
	document.removeEventListener("mouseup", mouseUp);
})




const mouseUp = () => {
	lastX.value = "";
	document.removeEventListener("mousemove", mouseMove);
}
const mouseDown = (event) => {
	document.addEventListener("mousemove", mouseMove);
	lastX.value = event.screenX;
}
const mouseMove = (event) => {
	proxy.$emit("widthChange", (lastX.value - event.screenX) * 5);
	lastX.value = event.screenX;
}

</script>
<style scoped>
.x-handle {
	width: 100%;
	height: 2px;
	position: absolute;
	top: 0;
	cursor: n-resize;
	z-index: 10;
	background: #ccc;
}
</style>
